<template>
  <el-popover placement="top-start"
              width="200"
              trigger="hover"
              :disabled="!content">
    <el-form label-position="left">
      <el-form-item :label="field"></el-form-item>
      <el-form-item>
        <template v-slot:label>
          <!-- <ZTooltip :line="1"
                    :content="content"> -->
          <span>{{content}}</span>
          <!-- </ZTooltip> -->
        </template>
      </el-form-item>
    </el-form>
    <div class="x-circle"
         slot="reference"
         :style="style">

    </div>

  </el-popover>

</template>

<script>
import props from './prop'
import ZTooltip from '@/components/storybook/z-tooltip'
import { set } from 'lodash'

export default {
  name: 'XCircle',
  componentName: 'Circle',
  components: {
    ZTooltip
  },
  props,
  computed: {
    style () {
      const { width, height, borderWidth, backgroundImage, borderStyle, borderRaduis, borderColor, boxShadowX, boxShadowY, boxShadowBlur, boxShadowColor, bg } = this
      const style = {
        width: `${width}px`,
        height: `${height}px`,
        borderRadius: `${borderRaduis}px`

      }
      if (bg) {
        set(style, 'backgroundColor', bg)
      }
      if (backgroundImage) {
        set(style, 'backgroundImage', `url(${backgroundImage})`)
      }
      if (boxShadowColor) {
        set(style, 'boxShadow', `${boxShadowX}px ${boxShadowY}px ${boxShadowBlur}px ${boxShadowColor}`)
      }
      if (borderColor) {
        set(style, 'border', `${borderWidth}px ${borderStyle} ${borderColor}`)
      }
      return style
    }
  }
}
</script>
<style lang="scss">
.x-circle {
  background-position: center center;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
</style>
